// src/components/Login.jsx
import React, {useState} from 'react';
import {useNavigate} from 'react-router-dom';
import {Input, Button, Form} from 'antd';
import {useAuthStore} from '../store/authStore';
import './common.less';

function Login() {
    const [form] = Form.useForm()
    const navigate = useNavigate();
    const {loginAsync, user} = useAuthStore();

    const handleLogin = async (values) => {
        console.log('到底', values)
        try {
            await loginAsync({...values}, {
                onSuccess: () => {
                    // 这是onSuccess回调
                    console.log('登录成功了！')
                    navigate('/dashboard'); // 登录成功后跳转
                },
                onError: () => {
                    // onError
                    console.log('登录失败了！')
                }
            });
            // 如果没有错误抛出，到这里说明登录成功
        } catch (err) {
            console.log(err); // 捕获store抛出的错误
        }
    };

    return (
        <section>
            <div className="color"></div>
            <div className="color"></div>
            <div className="color"></div>
            <div className="box">
                <div className="circle"></div>
                <div className="circle"></div>
                <div className="circle"></div>
                <div className="circle"></div>
                <div className="circle"></div>
                <div className="container">
                    <div className="form">
                        <h2>欢迎使用,请登录</h2>
                        <Form form={form} onFinish={handleLogin}>
                            <Form.Item className="inputBox" name="username" label="账号" rules={[{required: true, message: '请输入账户'}]}>
                                <Input type="text" placeholder="账号"/>
                            </Form.Item>
                            <Form.Item className="inputBox" name="password" label="密码" rules={[{required: true, message: '请输入密码'}]}>
                                <Input type="password" placeholder="密码"/>
                            </Form.Item>
                            <Form.Item className="inputBox">
                                <Button htmlType="submit" size='large' type="primary">登录</Button>
                            </Form.Item>
                            <p className="forget">仅供内部人员使用</p>
                            <p className="forget">切勿外传</p>
                        </Form>
                    </div>
                </div>
            </div>
        </section>
    );
}

export default Login;
